<template>
  <div class="box">
    <div class="module">
      <h4>运营概况</h4>
      <div class="content">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content">
              <div class="row">
                <i class="iconfont icon-dingdan"></i>
                <p>今日新增订单数（笔）</p>
              </div>
              <span>{{ (homeindex as any).Addorder }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content">
              <div class="row">
                <i class="iconfont icon-saoyisao" style="font-size: 34px;"></i>
                <p>今日交易金额（元）</p>
              </div>
              <span>{{ (homeindex as any).Dealmoney }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content">
              <div class="row">
                <i class="iconfont icon-xinzengrenshu" style="font-size: 34px;"></i>
                <p>今日新增会员数</p>
              </div>
              <span>{{ (homeindex as any).AddVip }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content">
              <div class="row">
                <i class="iconfont icon-svg-"></i>
                <p>今日活跃会员数</p>
              </div>
              <span>{{ (homeindex as any).ActiveVip }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content">
              <div class="row">
                <i class="iconfont icon-huiyuan"></i>
                <p>总会员数</p>
              </div>
              <span>{{ (homeindex as any).AllVip }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content">
              <div class="row">
                <i class="iconfont icon-icon3"></i>
                <p>总交易金额（元）</p>
              </div>
              <span>{{ (homeindex as any).Allmoney }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content">
              <div class="row">
                <i class="iconfont icon-dingdan-heji" style="font-size: 36px;"></i>
                <p>总订单数</p>
              </div>
              <span>{{ (homeindex as any).Allorder }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content">
              <div class="row">
                <i class="iconfont icon-zhifu-01"></i>
                <p>总支付人数</p>
              </div>
              <span>{{ (homeindex as any).AllPaypeople }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
      <p></p>
    </div>
    <div class="module">
      <h4>常用功能</h4>
      <div class="content">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="grid-content">
              <div class="row">
                <i class="iconfont icon-fukuanma" style="font-size: 40px; color: #00acac;"></i>
                <p style="font: 700 13px/20px ''; color: #666666;">收银下单</p>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content">
              <div class="row">
                <i class="iconfont icon-hexiaokaquan" style="font-size: 40px; color: #00acac;"></i>
                <p style="font: 700 13px/20px ''; color: #666666;">核销卡券</p>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content">
              <div class="row">
                <i class="iconfont icon-huiyuanguanli" style="font-size: 40px; color: #00acac;"></i>
                <p style="font: 700 13px/20px ''; color: #666666;">会员管理</p>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="grid-content">
              <div class="row">
                <i class="iconfont icon-dingdanguanli35" style="font-size: 40px; color: #00acac;"></i>
                <p style="font: 700 13px/20px ''; color: #666666;">订单管理</p>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content">
              <div class="row">
                <i class="iconfont icon-wodekaquan" style="font-size: 40px; color: #00acac;"></i>
                <p style="font: 700 13px/20px ''; color: #666666;">卡券管理</p>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content">
              <div class="row">
                <i class="iconfont icon-shangpin" style="font-size: 40px; color: #00acac;"></i>
                <p style="font: 700 13px/20px ''; color: #666666;">商品管理</p>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <p></p>
    </div>
    <div class="module">
      <h4>报表统计</h4>
      <div class="content">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="chart-container">
              <h5>近七日订单数量</h5>
              <div id="chart1" class="chart"></div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="chart-container">
              <h5>近七日会员活跃数</h5>
              <div id="chart2" class="chart"></div>
            </div>
          </el-col>
        </el-row>
      </div>
      <p></p>
    </div>
  </div>
</template>

<script   lang="ts">
import "@/font/iconfont.css";
import * as echarts from 'echarts';
import { defineComponent, onMounted, reactive, ref } from 'vue';
import { gethomedata } from "@/api/homeindex";

export default defineComponent({
  // name: 'LineChart',
  name: 'CombinedChart',
  setup() {
    const homeindex = ref({
      Addorder: '',
      Dealmoney: '',
      AddVip: '',
      ActiveVip: '',
      AllVip: '',
      Allmoney: '',
      Allorder: '',
      AllPaypeople: '',
    });

    const getList = async () => {
      // eslint-disable-next-line no-undef
      const res = await gethomedata({});
      console.log('获取列表的res', res);
      // eslint-disable-next-line prefer-destructuring
      homeindex.value = res.data.data[0];
      console.log(homeindex.value);
    };
    onMounted(() => {
      getList();
      // 获取chart容器的DOM引用
      const chart1El = document.getElementById('chart1');
      const chart2El = document.getElementById('chart2');
      // 使用echarts初始化chart
      const chart1 = echarts.init(chart1El);
      const chart2 = echarts.init(chart2El);
      // 定义图表配置
      const barOption = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
          },
        ],
      };
      // 定义图表配置
      const lineOption = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line',
          },
        ],
      };
      // 设置图表配置
      chart1.setOption(barOption);
      chart2.setOption(lineOption);
    });

    return { homeindex };
  },
});
</script>

<style scoped>
.box {
  margin: 0 20px;
}

p {
  height: 1px;
}

h5 {
  text-align: center;
}

h4 {
  padding: 15px 0 0 10px;
  height: 35px;
  background-color: #f4f4f4;
  border: 1px solid #e2e1e1;
}

.module {
  margin-top: 10px;
  box-shadow: 0 1px 2px #ccc;
  border: 1px solid #ccc;
}

.content {
  margin: 0 20px;
}

.el-row {
  margin: 20px 0;
}

.grid-content {
  min-height: 80px;
  min-width: 100px;
  cursor: pointer;
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;
  padding-left: 20px;
}

p {
  height: 28px;
  font-size: 13px;
}

i {
  display: inline-block;
  font-size: 30px;
  margin-right: 13px;
  color: #969393;
}

span {
  text-align: center;
  color: #ff5b57;
  font-weight: 700;
}

.row {
  display: flex;
  justify-content: left;
}

.chart-container {
  width: 420px;
  height: 400px;
}

.chart {
  width: 100%;
  height: 100%;
}
</style>
